<template>
  <n-flex
    justify="space-between"
    align="center"
    class="manage-top"
  >
    <n-flex
      align="center"
      :size="8"
    >
      <n-icon
        :component="FunnelOutline"
        color="#999"
      />
      <span style="color: #999">过滤</span>
      <n-divider vertical />
    </n-flex>
    <n-flex align="center">
      <n-input
        placeholder="请输入账单名称"
        size="small"
        v-model="name"
        style="width: 200px"
      >
        <template #prefix>
          <n-icon :component="Search" />
        </template>
      </n-input>
      <n-divider vertical />
      <n-button
        type="primary"
        size="small"
        @click="handleAddBill"
        >添加账单</n-button
      >
    </n-flex>
  </n-flex>
</template>

<script lang="ts" setup>
  import { Search, FunnelOutline } from '@vicons/ionicons5'

  const name = ref('')

  const handleAddBill = () => {}
</script>

<style scoped lang="scss">
  .manage-top {
    height: 48px;
    padding: 0 16px;
    background-color: #fff;
    border-radius: $radius-sm;
  }
</style>
